<template>
    <div id="home">
        <NavBar class="home-nav">
            <div slot="center">购物街</div>
        </NavBar>
        <TabControl v-show="isTabFixed" class="tab-control" ref="tabControl1" :titles="['流行', '新款', '精选']" @tabClick="tabClick"></TabControl>
        <ScrollVue @scroll="contentScroll" @pullingUp="loadMore" class="content" ref="scroll" :probeType="3"
            :pullUpLoad="true">
            <HomeSwiper @swiperImageLoad="swiperImageLoad" class="HomeSwiper" :banners="banners"></HomeSwiper>
            <RecommendView :recommends="recommends"></RecommendView>
            <FeatureView></FeatureView>
            <TabControl ref="tabControl2" :titles="['流行', '新款', '精选']" @tabClick="tabClick">
            </TabControl>
            <GoodsList :goods="showGoods"></GoodsList>
        </ScrollVue>
        <BackTopVue @click.native="backClick" v-show="isShowBackTop"></BackTopVue>
    </div>
</template>

<script>
import HomeSwiper from "./childComps/HomeSwiper.vue"
import RecommendView from "./childComps/RecommendView.vue"
import FeatureView from "./childComps/FeatureView.vue"

import NavBar from "../../components/common/navbar/NavBar"
import ScrollVue from "@/components/common/scroll/Scroll.vue"
import TabControl from "../../components/content/tabControl/TabControl"
import GoodsList from "../../components/content/goods/GoodsList"
import BackTopVue from "@/components/content/backTop/BackTop.vue"

import { getHomeMultidate, getHomeGoods } from '../../network/home'
import { debounce } from "@/components/common/utils"

export default {
    name: 'Home',
    data() {
        return {
            banners: [],
            recommends: [],
            goods: {
                pop: { page: 0, list: [] },
                new: { page: 0, list: [] },
                sell: { page: 0, list: [] },
            },
            currentType: 'pop',
            isShowBackTop: false,
            tabOffsetTop: 0,
            isTabFixed: false,
            saveY : 0
        }
    },
    computed: {
        showGoods() {
            return this.goods[this.currentType].list
        }
    },
    components: {
        NavBar,
        TabControl,
        HomeSwiper,
        RecommendView,
        FeatureView,
        GoodsList,
        ScrollVue,
        BackTopVue
    },
    methods: {
        tabClick(index) {
            switch (index) {
                case 0:
                    this.currentType = 'pop'
                    break
                case 1:
                    this.currentType = 'new'
                    break
                case 2:
                    this.currentType = 'sell'
                    break
            }
            this.$refs.tabControl1.currentIndex = index
            this.$refs.tabControl2.currentIndex = index
        },


        getHomeMultidate() {
            getHomeMultidate().then(res => {
                this.banners = res.data.banner.list
                this.recommends = res.data.recommend.list
            })
        },
        getHomeGoods(type) {
            const page = this.goods[type].page + 1
            getHomeGoods(type, page).then(res => {
                this.goods[type].list.push(...res.data.list)
                this.goods[type].page += 1
                this.$refs.scroll.finishPullUp()
            })
        },
        backClick() {
            this.$refs.scroll.scrollTo(0, 0)
        },
        contentScroll(position) {
            // 判断backtop是否显示
            if (position.y > -1000) {
                this.isShowBackTop = false
            }
            else {
                this.isShowBackTop = true
            }

            // 决定tabControl是否吸顶
            this.isTabFixed = (-position.y) > this.tabOffsetTop
        },
        loadMore() {
            this.getHomeGoods(this.currentType)
        },
        swiperImageLoad() {
            // console.log(this.$refs.tabControl.$el.offsetTop)
            this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop - 44
        }

    },
    activated() {
        this.$refs.scroll.scrollTo(0,this.saveY,0)
        this.$refs.scroll.refresh()
    },
    deactivated(){
        this.saveY = this.$refs.scroll.getScrollY()
    },
    created() {
        // 1.请求多个数据
        this.getHomeMultidate()

        // 2.请求商品数据
        this.getHomeGoods('pop')
        this.getHomeGoods('new')
        this.getHomeGoods('sell')
    },
    mounted() {
        const refresh = debounce(this.$refs.scroll.refresh, 200)
        this.$bus.$on('imageLoad', () => {
            refresh()
        })
    }
}
</script>

<style scoped>
.home-nav {
    background-color: var(--color-tint);
    color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
}

.HomeSwiper {
    padding-top: 44px;
}

.TabControl {
    position: sticky;
    top: 44px;
    z-index: 9;
}

.content {
    position: absolute;
    top: 0;
    bottom: 49px;
    left: 0;
    right: 0;
    /* background-color: red; */
    overflow: hidden;
}
.tab-control{
    position: relative;
    z-index: 9;
}
</style>